<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Object.defineProperty方法</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div>
            <h1>Object.defineProperty方法</h1>
            <p>enumerable控制属性是否可以枚举，默认值是false</p>
            <p>writable控制属性是否可以修改，默认值是false</p>
            <p>configurable控制属性是否可以删除，默认值是false</p>
            <p>get():当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值</p>
            <p>set(value):当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值</p>
        </div>
        <script type="text/javascript">
            let number = 18
            let person = {
                name: "张三",
                sex: "男",
            }

            Object.defineProperty(person, 'age', {
                // value: 18,
                // enumerable: true,   // 控制属性是否可以枚举，默认值是false
                // writable: true,     // 控制属性是否可以修改，默认值是false
                // configurable: true, // 控制属性是否可以删除，默认值是false

                // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
                get(){
                    console.log('有人读取age属性了')
                    return number
                },

                // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
                set(value) {
                    console.log('有人修改了age属性，且值是', value)
                    number = value
                }
            })
        </script>
    </body>
</html>
